<!-- 模型详情 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="70%"
    destroy-on-close
  >
    <div class="form-box" style="max-height: 500px; overflow-y: auto">
      <el-descriptions :column="1">
        <el-descriptions-item label="表名称">
          {{ localModelResp.modelName || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="表编码">
          {{ localModelResp.modelCode || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="目标数据库">
          {{ targetDb }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ localModelResp.remark || "---" }}
        </el-descriptions-item>
        <el-descriptions-item label="关联表">
          {{ modelRelationInfo }}
        </el-descriptions-item>
        <el-descriptions-item label="建表方式">
          <template v-if="localModelResp.createStyle === '0'">
            向导模式
          </template>
          <template v-else-if="localModelResp.createStyle === '1'"
            >DDL模式
          </template>
          <template v-else> --- </template>
        </el-descriptions-item>
        <el-descriptions-item label="表名">
          {{ localModelResp.tableName || "---" }}
        </el-descriptions-item>
        <el-descriptions-item
          label="DDL"
          v-if="localModelResp.createStyle === '1'"
        >
          <ace
            ref="aceEditor"
            :value="localModelResp.ddl"
            :options="editorOptions"
            lang="sql"
            width="100%"
            height="500"
            theme="chrome"
            @init="initEditor"
          ></ace>
        </el-descriptions-item>
        <el-descriptions-item
          label="主键"
          v-if="localModelResp.createStyle === '0'"
        >
          {{ primaryFiled }}
        </el-descriptions-item>
        <el-descriptions-item
          label="表字段"
          v-if="localModelResp.createStyle === '0'"
        >
        </el-descriptions-item>
      </el-descriptions>
      <el-table
        v-if="localModelResp.createStyle === '0'"
        :data="localFieldList"
        :cell-style="{ color: '#333333' }"
        :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      >
        <el-table-column
          prop="columnField"
          label="字段名"
          min-width="150"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="columnType"
          label="字段类型"
          min-width="150"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="columnPrecision"
          label="精度"
          min-width="150"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="columnScale"
          label="标度"
          min-width="150"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="columnRemark"
          label="注释"
          min-width="150"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="isAllowNullStatus"
          label="是否为空"
          min-width="150"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <template v-if="scope.row.isAllowNull === 0"> 否 </template>
            <template v-else-if="scope.row.isAllowNull === 1"> 是 </template>
            <template v-else> --- </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script>
import ace from "vue2-ace-editor";
export default {
  name: "ModelDetail",
  components: {
    ace,
  },
  props: {
    dataBases: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogTitle: "表详情",
      dialogVisible: false,
      dialogForm: {},
      editorOptions: {
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,
        showPrintMargin: false,
        fontSize: 16,
        readonly: true,
      },
    };
  },
  computed: {
    localModelResp() {
      return this.dialogForm.localModelResp || {};
    },
    targetDb() {
      let dbInfo = this.dataBases.find(
        (ele) => ele.value === this.localModelResp.dataSourceId
      );
      if (dbInfo) {
        return dbInfo.label;
      }
      return "---";
    },
    modelRelationInfo() {
      if (
        Array.isArray(this.dialogForm.modelRelationList) &&
        this.dialogForm.modelRelationList.length
      ) {
        return this.dialogForm.modelRelationList
          .map((i) => i.originalTable)
          .join("，");
      }
      return "无";
    },
    primaryFiled() {
      if (Array.isArray(this.dialogForm.primaryDropDown)) {
        let primaryInfo = this.dialogForm.primaryDropDown.find(
          (i) => String(i.id) === String(this.localModelResp.primaryKeyId)
        );
        return primaryInfo ? primaryInfo.columnField : "无";
      }
      return "---";
    },
    localFieldList() {
      return this.dialogForm.localFieldList || [];
    },
  },
  methods: {
    // 打开弹窗
    openDialog(info) {
      this.dialogForm = info;
      this.dialogVisible = true;
    },
    initEditor() {
      require("brace/ext/language_tools");
      // 设置语言
      require("brace/mode/sql");
      require("brace/snippets/sql");
      // 主题
      // require('brace/theme/monokai')
      require("brace/theme/chrome");
      // require('brace/theme/crimson_editor')
    },
  },
};
</script>
<style scoped></style>
